<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
	<title>Google Maps Test</title>
	<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA6n4mnYyhliwGS_KVgdcN9RT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT-lhEiRjMXNAgYQH_f2Yzv12wbQg&sensor=true"></script>
	<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA6n4mnYyhliwGS_KVgdcN9RT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT-lhEiRjMXNAgYQH_f2Yzv12wbQg"></script>
	<script type="text/javascript">
	
		google.load("maps", "2");

		var polylineAddresses = "";
		var map;
	    var directionsPanel;
	    var directions;
	    var directionsOptions;

		function initialize() 
		{
			map = new google.maps.Map2(document.getElementById("map"));
			map.setCenter(new google.maps.LatLng(-22.92632, -43.235147), 15);
		}

		google.setOnLoadCallback(initialize);

		function showAddress(response)
		{
			if (!response || response.Status.code != 200) 
			{
				alert("Status Code:" + response.Status.code);
			}
			else 
			{
				place = response.Placemark[0];
				polylineAddresses += "Address: " + place.address + "\n";
				/*
				point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
				marker = new GMarker(point);
				map.addOverlay(marker);
				*/
			 }
		}

		function route()
		{
			map = new google.maps.Map2(document.getElementById("map"));
			directionsOptions = {locale: "pt_BR" , getPolyline: true };			
			
			directionsPanel = document.getElementById("route");
			directionsPanel.innerHTML = "";
			directions = new GDirections(null, directionsPanel);
			directions.load("from: " + document.getElementById("origin").value + " to: " + document.getElementById("destination").value, directionsOptions);		
			GEvent.addListener(directions,"load", function(){ 
			
				var polyline = directions.getPolyline();
				var geocoder = new GClientGeocoder();

				map = new google.maps.Map2(document.getElementById("map"));
				map.setCenter(new google.maps.LatLng(-22.92632, -43.235147), 16);				
				map.addOverlay(polyline);
				
				var vertex;
				var point; 
				
				for(vertex = 0; vertex < polyline.getVertexCount(); vertex++ )
				{
					point = polyline.getVertex(vertex);
					geocoder.getLocations(point,showAddress);
				}
				
			});
		}	
	  
	</script>
	<style type="text/css">

      ul { 
      	list-style: none;
      }
      
    </style>
</title>
<body onunload="GUnload()">
	<div id="formulario">
		<ul>
			<li><label for="origin">Origem</label></li>
			<li><input type="text" id="origin" name="origin" value="Rua Conde de Bonfim, 451 - Tijuca - Rio de Janeiro"/></li>
		</ul>
		<ul>
			<li><label for="destination">Destino</label></li>
			<li><input type="text" id="destination" name="destination" value="Rua Barao de Piracinunga, 26 - Tijuca - Rio de Janeiro"/></li>
		</ul>
		<ul>
			<li><input type="button" name="route" value="Route" onclick="javascript:route();"/></li>
			<li><input type="button" name="addresses" value="Show Addresses" onclick="javascript:alert(polylineAddresses);"/></li>
		<ul>
	</div>
	<div id="map" style="width: 70%; height: 480px; float:left; border: 1px solid black;"></div> 
    <div id="route" style="width: 25%; height:480px; float:right; border; 1px solid black;"></div> 
</body>
</html>
